import { Message } from "element-react";
import { Menu, Layout } from "element-react";
import React, { Component } from "react";
import { getTree, getUserList, addTree } from "./assets/js/http.js";
import Header from "./components/Header/Header.js";
import Slider from "./components/Slider/Slider.js";
import "element-theme-default";
import RouterView from "./router/routerView.js";
import { renderRoutes } from "react-router-config";
class home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: "",
      menus: [],
      active: "",
      actives: [],
    };
  }
  //   添加树;
  async addTree() {
    let res = await addTree();
  }
  //   获取用户列表
  async getUserList(params) {
    let res = await getUserList(params);
  }
  //   选择左侧导航跳转路由
  async selectMenus(index) {
    this.setState({
      active: index + "",
    });
    localStorage.setItem("active", index);
    this.props.history.push(index);
  }
  //   生命周期
  async componentWillMount() {
    let user = JSON.parse(localStorage.getItem("user")) || null;
    if (!user) {
      this.props.history.push("/login");
      return;
    }
    this.setState({
      user: user[0],
    });
    let params = {
      token: user[0].token,
    };
    let arr = [];

    let { code, data, msg } = await getTree(params);
    let that = this;
    if (code == 1) {
      await that.setState({
        menus: data,
      });
    } else {
      Message({
        message: msg,
        type: "warning",
      });
    }
    if (user[0].role == "平民") {
      this.state.menus.map((item) => {
        if (item.children.length > 0) {
          arr.push(item.webUrl);
        }
      });
    }
    await this.setState({
      actives: arr,
    });
    let obj = {
      token: user[0].token,
    };
    // this.getUserList(obj);
    this.addTree();
    if (localStorage.getItem("active")) {
      this.setState({
        active: localStorage.getItem("active"),
      });
    } else {
      this.setState({
        active: this.props.location.pathname,
      });
    }
  }
  render() {
    return (
      <div className="home">
        <div className="home_header">
          {/* 头部组件 */}
          <Header />
        </div>
        <div className="home_main">
          <div className="slide fl">
            {/* 左侧导航 */}
            <Menu
              uniqueOpened={true}
              defaultOpeneds={this.state.actives}
              defaultActive={this.state.active}
              onSelect={this.selectMenus.bind(this)}
              className="el-menu-vertical-demo"
            >
              {this.state.menus.map((item) => {
                return (
                  <Slider
                    key={JSON.stringify(item)}
                    item={JSON.stringify(item)}
                  />
                );
              })}
            </Menu>
          </div>
          <div className="content_box fl">
            {/* 右侧路由出口 */}
            <RouterView routers={this.props.routers} />
          </div>
        </div>
      </div>
    );
  }
}
export default home;
